developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com
jars.com
intranetjournal.com
javascripts.com
|
All Categories :
HTML
Chapter 28
Using Microsoft Internet Assistant
CONTENTS
If your main HTML editor is Microsoft Word, or you have a copy
of Microsoft Word and you've been using something else, you may
really like Internet Assistant. Although Internet Assistant (IA)
only offers basic support for HTML tags in your documents, that
might not be so bad. Especially since there's nothing wrong with
editing the rest of the document by hand.
| Note |
Internet Assistant is a free add-on for Microsoft Word version 6.0 and above. A separate version is available for either Windows 3.1 or Windows 95. (A Mac version should also be available by the time you read this.) You can download them from Microsoft's Web site at http://www.microsoft.com/.
|
Internet Assistant actually adds two different elements to Microsoft
Word. After installation, a few new menu items exist for your
use, including Insert, Hyperlink. But Internet Assistant
also adds the ability to view basic HTML documents from within
Microsoft Word with the command File, Browse Web
(see fig. 28.1).
Figure 28.1 : The MS Word/Internet Assistant browser.
Creating HTML documents in Internet Assistant isn't really much
different from creating a typical Word document. The key is to
use the HTML template. In Word, choose File, New.
In the new document, select the HTML template for use with your
new document. Then place your cursor and begin typing. You can
use bold, italics, or underlining as you type.
You can also use the HTML style sheet definitions to help you
change basic text to HTML markup. Consider the example, just typed
directly into a new HTML-template Word document, like the following:
BigCorp's Customer Service Pages
To change this text from normal text to a Heading 2 (<H2>),
select the text with the mouse in Word, and then pull down the
style menu and select Heading 2. Word automatically formats the
selected text to conform to the HTML standard for Heading 2. As
an added bonus, you can see how it might look in a browser window
(see fig. 28.2).
Figure 28.2 : Changing text to an HTML header.
| Tip |
As with Word templates in general, you can always select the style first, then type your text.
|
Creating a list in Internet Assistant is pretty easy, too. For
an ordered or unordered list, all you need to do is enter the
text for your list, hitting Enter after each. An example might
be:
Downloadable Support Files
Frequently Asked Questions
Send Us a Note
Toll-Free Numbers
The next step is to select the entire list with the mouse. With
all of the above highlighted, you can either select the appropriate
list button in the buttonbar or select the list type in the pull-down
style menu. For instance, if you click the Bullet List (UL) button
in the button bar, you'll get something like what's shown in figure
28.3.
Figure 28.3 : Changing regular text to a bulleted list.
If you're interesting in indenting list items, like when creating
an outline, the Internet Assistant will let you do that, too.
Use an unordered list like the following:
Section 1
Chapter 1
Part 1
Part 2
Chapter 2
You can use the Internet Assistant button bar to move some of
these over. First, you can select all of the text under Section
1 and click once on the Increase Indent button to move everything
over once. You can also choose Format, Increase
Indent. Select Part 1 and
Part 2, or Chapter 1,
and you can click the button once more to indent those, too (see
fig. 28.4).
Figure 28.4 : Indenting (nesting) your lists.
Some HTML mark up in Internet Assistant requires that you follow
special instructions, depending on the Windows version you're
using. Internet Assistant 1.0 for Windows 3.1 handles definition
lists differently from IA 2.0 for Windows 95. Start by typing
the first word from your list, then press Tab and type the definition.
You do this for your entire list, as in the following example:
Mr. Ted Smith
President,
CEO. Ted's a huge Cubs fan, an avid golfer,
father of three daughters and Carol's husband. He also works here.
Ms. Gina Miles
CFO.
Gina enjoys hiking, mountain biking and weekend lecturing. Also
a Cubs fan, Gina enjoys attending the games with her husband Mike.
Mr. Rick Felps
EVP,
Marketing. Rick's passion is his '67 Mustang
Convertible, which he often drives to the lake on weekends for
fishing outings. Rich hates the Cubs, preferring the Phillies.
Now, by selecting the text and choosing the definition list (DL)
option from the pull-down menu, the names will become definition
terms (DT) and the descriptions become definitions (DD).
In Windows 95, things are a little more involved. Using the sample
text, choose all of the text and make it a definition list using
the pull-down menu. Then, select each element separately and make
it either a definition item or definition, as appropriate. That
will cause the definitions to standout from the definition terms
(see fig. 28.5). You can also hit Return after each DT to place
the definitions below their respective terms.
Figure 28.5 : Changing regular text to DL terms and definitions.
| Tip |
You can also assign shortcuts to common HTML styles. Choose Format, Style to open the Style dialog box. Pick the correct style, choose Modify, and then select the Shortcut key. Then you just enter a keyboard combination for that style.
|
Notice that Internet Explorer's pull-down style menu will also
let you create a <DL COMPACT>
list. To do this, follow the appropriate procedure above, but
choose definition compact instead of definition list.
Microsoft Word defaults to the HTML file format when you use the
HTML template (in Internet Assistant) to create your document,
so you can basically save your Web page in the same way that you
might save a regular MS Word document.
With an HTML document active, choose File, Save.
The Save As dialog box appears (see fig. 28.6). Give your file
a name in the File name box. Make sure HTML Document is
selected in the Save as type menu at the bottom of the
dialog box. When you're finished, choose Save. Now you've
got an HTML document for your Web site.
Figure 28.6 : Saving your HTML documents.
Let's create a simple page in Internet Explorer and use what you've
learned so far to create a new HTML document. To begin, create
a new Word file based on the HTML template. You may also want
to save this file to give it a name. Then, just type Listing 28.1
(or something similar).
Listing 28.1 iatest.htm A
Sample Page for Internet Assistant
BigCorp's Customer Service Pages
To help you get the most out of our products, or just help if
you're having a problem, we've created the following Web pages
with downloading files, tips, tricks, fixes and answers to your
questions. Just click any link to get to that page.
Downloadable Support Files Fixes, drivers,
free stuff, utility programs, documents and even a game or two
written by our engineering and tech support staffs. If you can't
find it here, BigCorp hasn't written it. (Or you'll have to buy
it from us!)
Frequently Asked Questions Listing of
questions that our tech support reps hear all the time. They're
willing to answer them again, but that just means they get frustrated
and take more breaks.
Send Us a Note Send
email directly to the most prolific answer guy on our support
staff.
Toll-Free Numbers Phone numbers for tech
support, customer service, and, for good measure, we've even thrown
in our toll-free, 24 hour sales numbers. Good of us, eh?
Now the trick is to turn this into a more interesting page. You
can start with the heading by selecting the entire heading and
changing it to a Heading 2 using the pull-down style menu.
In the descriptive text (first paragraph), there's nothing particularly
special you need to do. You can always add bold and italic text
where it seems appropriate by highlighting the text and clicking
the buttons in the Word/Internet Assistant button bar. You could
also experiment by turning the entire paragraph into blockquote
text or other HTML mark up.
| Tip |
The Horizontal Rule button-or the Insert, Horizontal Rule menu command-can be used to insert an <HR> line in your document.
|
In the next section, notice that I've used <TAB>
to prepare it to be a definition list. Select the entire section
of text and change it to a definition list, DL in the pull-down
style menu. (In IA 2.0, you also need to select each element separately
to assign it as a DT or DD.)
Now, save the file as an HTML document, along with the appropriate
file extension. You're set. To view the document in Word's built-in
browser, click the Switch to Browser button (far left on the second
row of the button bar), or select View, Web Browse. It should
look something like what's shown in figure 28.7.
Figure 28.7 : Your example in Word's new built-in browser.
| Note |
You can also use the Preview in Browser button (the rightmost button on the first row of the button bar) to load the document directly into the default Windows 95 browser. Or, choose File, Preview in Browser. To work with your document as a plain text file, choose the View, HTML Source command. Word will close the HTML document (and HTML template) and re-open the file as a text file, complete with the tags and other markup.
|
After you've viewed the document, you can switch back to edit
mode by clicking the Switch to Browser button again, which has
now changed to a pencil icon.
Internet Assistant also gives you the ability to add the trappings
of good Web pages, including hypertext links, images, and <HEAD>
information. For the most part, you can do just about anything
possible in HTML 2.0, and it's all fairly straightforward.
To insert a hypertext link, highlight that text and click the
Hyperlink button, or choose Insert, Hyperlink. The
Hyperlink dialog box opens allowing you to enter or edit text
for the link and choose a local file or URL as the document (or
multimedia file) this link references (see fig. 28.8). Enter or
edit the text and choose a file. Click OK when finished and your
hypertext link will appear in the document.
Figure 29.8 : Creating hypertext links.
Word calls local HTML NAME
anchors "bookmark" links, and allows you to create them
with the help of Internet Assistant. Remember that NAME
links have two different components: a calling link and a NAME
anchor to which the link points.
You need to start by creating the bookmark link (NAME
anchor). To do this, place the cursor where you want the bookmark
anchor to be in the document. Then, you can click the Bookmark
button on the button bar or choose Edit, Bookmark
from the menu. In the Bookmark dialog box that appears, enter
a name for this bookmark.
To create the calling link, use the same Hyperlink button or choose
Insert, Hyperlink. After entering text for the link,
choose the bookmark name from the pull-down menu at the bottom
of the dialog box. Make sure it's selected, and then click OK.
Inserting an image in an Internet Assistant HTML document is similiar
to inserting a hypertext link. Start by placing your cursor in
the document where you'd like the image to appear. Next, click
the Picture button or choose Insert, Picture. In
the resulting dialog box, choose the name of an image. You can
also enter ALT text for displaying
instead of the graphic in text-based browsers.
To determine whether or not this image will be a server-side image
map and how text will align to it, click the Options tab in the
Picture dialog box (see fig. 28.9). Now you can choose the Image
is a sensitive map option to add the ISMAP
attribute and how you want the image aligned. (Remember that LEFT
and RIGHT are not HTML 2.0
values.) Click OK in both dialog boxes and you've inserted your
image.
Figure 28.9 : Adding a picture with advanced settings.
Notice that you can also enter video clips with the Picture dialog
box (click the Video tab). This uses Microsoft Explorer's proprietary
tags for adding and playing AVI files.
Since Internet Assistant doesn't give you direct access to the
HTML tags in your document, you'll need to use a special command
for <HEAD> elements.
On the button bar, click the Title button, or choose File,
HTML Document Info. The HTML Document Head Information
dialog box appears.
In this dialog box, enter the Title for your Web document. Click
OK if that's all you need to add. If you need to add a Base address,
click the Advanced button in this dialog box. Enter the URL in
the HTML Document Head Info-Advanced field. You can also click
the Is Index checkbox if you'd like this page to be an index.
To enter custom HTML text in the head of your document, click
the Meta button (this isn't just for the <META>
tag, as used for client-pull, but any <HEAD>
tags). In the Insert HTML Markup textbox, you can enter any HTML
code you'd like to have appear in the head of your document. When
you're finished, click OK.
| Note |
You can use a similar command to add your own tags within the body of your document. With the cursor placed at the point in your document where you want to enter the special tag, choose Insert, HTML Markup. In the Insert HTML Markup dialog box that appears, enter the special HTML markup and click OK.
|
Now, let's take the page you created in the first example and
add links, images, and a title. If you use the same document (complete
with markup) that you used in the original example, that's great.
If not, re-enter the text from Listing 28.1 and save it as iatest2.htm.
Let's start by adding an image to this page just before the heading.
Place the cursor, and select the Picture button or choose Insert,
Picture. The Picture dialog box should appear with the
Picture tab open. In this dialog box, choose a graphic
file. When you click OK, the picture will appear in your document.
(You may want to press Return after the graphic to place the heading
text on the next line.)
Now let's create the hypertext links for the definition terms.
Highlight each term with the mouse (e.g., Downloadable Support
Files) and click the Hyperlink button, or choose Insert,
Hyperlink. Your text will appear in the Text to Display
textbox. Now you can enter the file, URL, or bookmark to which
this link should point.
Finally, let's give your document a title. Click the Title button
or select File, HTML Document Info. In the dialog
box, enter a title for this page and click OK. You're done. It
should look something like figure 28.10 in Word's built-in browser.
Figure 28.10 : Your example page.
To create a form and add your first form field, choose Insert,
Form Field command. In the New Form dialog box that appears,
you'll get a little bit of instruction for entering form elements.
If you don't want to see this dialog every time you add forms
to a new document, click the Don't Display This Message Again
checkbox. Then click OK.
In the list of radio buttons that appears, choose a field type
to add. (I'm starting with a text field.) Next stop is the Text
Form Field dialog box, which allows you to name the element and
set some basic characteristics (see fig. 28.11).
Figure 28.11: Adding a form field.
To add more fields, you can go straight to the Forms controls
and click the type of field you want to add. Make sure you give
each a unique name, just as if you were hand editing the form.
In order to get the form data to your form script, you need to
set up the Submit button. When you've finished adding other script
elements, click Submit in the Forms control window. In the Submit
Button Form Field dialog box that appears, you can name the button,
change the button's label (value), and enter an URL for the ACTION
attribute (see fig. 28.12). You can also use the pop-up menu to
choose the METHOD for sending
form data.
Figure 28.12 : Creating the Submit button.
You can't do much of a listing here, since you're not dealing
in much raw HMTL or text. Let's create a new document that includes
just two form fields and a Submit button.
If you want to, you can start by jazzing the form up with a logo
graphic. Then, underneath it, type something like the following:
Customer Service Form
Your name:
Your email:
Change the first line to a Heading 2 using the pull-down menu,
but leave the other text as is. Place the cursor to the right
of the second line and choose Insert, Form Field
to create a form. Select Text from the Form Field menu and enter
a name for this field in the Text Form Field dialog box.
Go through the same thing just to the right of the third line,
except this time you can use the Forms controls to create the
text field (use the top left button). Remember to name it something
different, like "e-mail."
Back in the document, press Return after the second text field
and click the Submit button in the Forms controls. In the Submit
Button Form Field dialog box, name the button, give it a label,
enter an URL for your ACTION,
and choose a METHOD. Click
OK and you're done. Figure 28.13 shows this form in Word's Web
browsing mode.
Figure 28.13 : Your form through the MS Word browser mode.
Internet Assistant is designed to add Web browsing and editing
functionality to the Microsoft Word word processor. Downloading
this free add-in adds two different components. One allows you
to view HTML documents from within Word. The other adds an HTML
template and special menu/button bar commands for creating and
editing Web pages.
Basic HTML is about as simple as creating a regular Word document-just
type text and apply styles. Generally speaking, everything can
be done a couple of different ways. You can choose to click the
Bold button, for example, or you can choose Style, Bold.
Creating lists is also fairly simple in Internet Assistant, although
creating definition lists can be a little tricky. Hypertext links,
images, and head elements are all added via menu items and dialog
boxes. For NAME hypertext
links, IA uses Word's bookmark system.
The key to IA is its ability to save files in HTML format. It's
this "translator" that does the real work once you've
created your page. By saving your document as an HTML file (the
default when you use the HTML template), you're able to edit it
in a text editor and display it on the Web.
- Is Internet Assistant an application program? Where do you
get it?
- Is it possible to select an HTML style first, then type your
text?
- In what type of file does IA save your HTML? Can you edit
this with other programs?
- True or false. Indenting list items actually creates a "nested"
list.
- What command allows you to change from an unordered to an
ordered list type?
- What is the major difference between definition lists in IA
1.0 versus
IA 2.0?
- True or false. Since HTML documents are just ASCII text, it's
acceptable to save your IA HTML document as "text only."
- What is the HTML equivalent of Internet Assistant's bookmark
link?
- Which do you create first: the bookmark link or the calling
link?
- What element controls the SUBMIT
and METHOD information for
your form?
- Use Internet Assistant's definition lists and hyperlinks to
create a page of book reviews. Clicking the book's name shows
the user a graphic of the book. For instance, an entry might be:
HTML By Example The best book ever
written for learning
HTML the right way.
- Based on this example, add another definition (DD) line that
includes a link to order the book, the author's name, copyright
info, and price. For instance:
HTML By Example The best book ever
written for learning
HTML the right way.
Todd Stauffer, Copyright 1996, $34.99. Order this book.
- Create a text-based menu-bar using IA. For instance:
Index | Product Pages | Customer Service
| Feedback | About Us
- Add client-pull abilities to your Web page using Internet
Assistant.
|
|
